<template>
	<div class="mobile-im van-hairline--top" :style="`height:${height}px;`">
		<div
			class="mobile-im-message"
			v-loading="message.loading"
		>
			<div class="mobile-im-message-list" ref="mobileImMessageList" v-if="message.list.length">
				<transition name="van-fade">
					<p
						class="mobile-im-message-list-more"
						v-if="message.isShowMore"
						@click="clickLoadMore"
					>点击加载更多</p>
				</transition>

				<im-message-item
					v-for="item in message.list"
					:key="item.id"
					:item="item"
				></im-message-item>
				<div class="mobile-im-container van-safe-area-bottom"></div>
			</div>
			<div v-if="!message.loading && !message.list.length">
				<el-empty description="快来互动吧！" />
			</div>
		</div>

		<div class="mobile-im-container foot van-safe-area-bottom">
			<div class="mobile-im-container-box">
				<el-popover :width="300" placement="top">
					<template #reference>
						<img src="@/img/watch/emoil.svg" alt="" style="width: 20px;height:20px;cursor:pointer;margin-left:5px;margin-top:4px;">
					</template>
					<template #default>
						<div class="pc-emoil-list">
							<img
								v-for="(item, key) in emojiMap"
								:key="key"
								class="pc-emoil-item__inner"
								:src="`${emojiUrl}${item}`"
								alt=""
								style="width: 24px;height:24px;"
								@click="message.textValue += key"
							>
						</div>
					</template>
				</el-popover>
				<input
					class="mobile-im-container-box-content"
					v-model="message.textValue"
					:placeholder="message.disabled ? '此功能暂不可用' : '请说点什么吧？'"
					:disabled="message.disabled"
				/>
				<div class="mobile-im-container-box-submit" @click="clickSend">发送</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { emojiUrl, emojiMap } from '@/utils/emojiMap'
import ImMessageItem from "./im-message-item.vue";
import useTim from '../../hooks/useTim';

defineProps({
	height: [Number, String],
	default: 0
})

const mobileImMessageList = ref()

const { message, clickLoadMore, sendMessage } = useTim();

async function clickSend (){
	if (message.disabled) return
	const res = await sendMessage()
	if (res) {
		await nextTick(() => {
			mobileImMessageList.value.scrollTop = mobileImMessageList.value.scrollHeight
		})
	}
}
</script>

<style scoped lang="less">
	.mobile-im {
		cursor: initial;
		&-message {
			height: 100%;
			&-list {
				height: 100%;
				box-sizing: border-box;
				padding: 20px;
				height: 100%;
				overflow-y: auto;
				&::-webkit-scrollbar {
					width: 0px;
					height: 1px;
				}
				&-more {
					color: #fff;
					cursor: pointer;
					text-align: center;
					font-size: 14px;
				}
			}
			&-empty {
				height: 100%;
				display: flex;
				justify-content: center;
				flex-direction: column;
			}
		}
		&-container {
			box-sizing: border-box;
			width: 100%;
			height: 60px;
			padding-bottom: 20px;
			&.foot {
				width: 100vw;
				position: fixed;
				bottom: 0;
				left: 0;
				z-index: 10;
				padding: 4px 20px;
			}
			&-box {
				width: 100%;
				height: 30px;
				border-radius: 100px;
				border: 1px solid rgba(255,255,255,0.2);
				box-sizing: border-box;
				padding: 1px 2px 0 0;
				display: flex;
				background-color: var(--background-color, #383f54);
				&-content {
					display: block;
					width: 100%;
					height: 100%;
					background-color: transparent;
					border: none;
					box-sizing: border-box;
					padding: 0 16px;
					outline: none;
					color: #fff;
					font-size: 14px;
				}
				&-submit {
					flex: 0 0 50px;
					height: 25px;
					line-height: 28px;
					color: #fff;
					background-color: var(--van-blue);
					border-radius: 30px;
					text-align: center;
					font-size: 12px;
				}
			}
		}
	}
</style>
